<!DOCTYPE html>
<html lang="en">
<!--模仿postman编写一个简易的http接口测试工具-->
<head>
    <meta charset="UTF-8">
    <title>自定义HttpClient</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- json编辑器 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.0.3/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.0.3/jsoneditor.js"></script>
    
    <link rel="stylesheet" href="./static/httpClientStyle.css">
    <script src="./static/httpclient.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h3 class="page-header">接口测试工具</h3>
        <div>
            <label class = "label-title">接口地址:</label>
            <input type="text" class="form-control" id="url_input"
                   value="http://localhost:8083/server/api/">
            <!--<label>接口类型:</label><input type="text" class="form-control" id="type_input" value='POST'>-->
            <div>
                <label class = "label-title">接口类型:</label>
                <select id="type_select" class="selected form-select-button" style="height: 25px">
                    <option value="GET">GET</option>
                    <option value="POST" selected>POST</option>
                    <option value="POST-ajax" >AJAX-POST</option>
                    <option value="GET-ajax">AJAX-GET</option>
                </select>
            </div>
            <label class = "label-title">消息头:</label><input type="text" class="form-control" value = "" id="header_input" title='"A":"XX","B":"XX"'>

            <label class = "label-title">消息体:</label>
            <div>
                <input name="bodyType" type="radio" value="form">&nbspForm 
                <input name="bodyType" type="radio" value="json" checked>&nbspJSON
            </div>
            <!-- <input type="text" class="form-control" id="body_input" value='{"id":"1"}'> -->
            <div class = "label-title" id="jsoneditor" style="width: 100%; height: 400px;"></div>
        </div>

        <div class="btn-group">
            <button type="submit" class="btn btn-primary" title="发送消息" onclick="send()">发送</button>
            <button type="reset" class="btn btn-primary" title="刷新页面" onclick="location.reload()">刷新</button>
            <button type="reset" class="btn btn-primary" title="清空查询结果" onclick="clearShowArea()">清空</button>
            <button type="reset" class="btn btn-primary" title="跳转首页" onclick="location.href='/'">首页</button>
        </div>

        <div>
            <label class = "label-title">返回结果:</label>
            <div class="well">
                <p id="showArea"></p>
            </div>
        </div>
    </div>
</div>
</body>
</html>